<template>
	<div>
		<div class="flex items-center w-full">
			<header-title titleT="casinoAll.allTags" go="casino"></header-title>
		</div>
		<div class="h-group-t-big"></div>
		<div class="relative">
			<base-loading-box
				class="w-full min-h-[150px]"
				:isEmpty="isEmpty"
				:error="error"
				:loading="loading">
				<n-grid ref="supplierel" :y-gap="24" :x-gap="isDesktop ? 16 : 9" :cols="currentCols">
					<n-gi v-for="(item, index) in list" :key="index" class="app-hover-offset">
						<base-router
							name="casinoTags"
							:params="{ id: item?.tagSlug }"
							class="bg-[#212834] rounded-[10px] flex justify-center items-center h-[52px] md:h-[104px]">
							<div class="flex items-center">
								<base-image
									class="w-[20px] md:w-[36px] mr-1"
									:class="item.fullGameName || item.gameKey ? 'cursor-pointer' : ''"
									:src="item.labelIcon"
									default="placeholder-higher.svg"
									type="network"></base-image>
								<div class="text-t-1 whitespace-nowrap text-[12px] md:text-[20px]">
									{{ item.labelName }}
								</div>
							</div>
						</base-router>
					</n-gi>
				</n-grid>
			</base-loading-box>
		</div>
	</div>
</template>
<script lang="ts" setup>
import HeaderTitle from '../categories/components/header-title.vue'
import { ref, onMounted, computed, watch } from 'vue'
import type { Ref } from 'vue'
import { useListCols } from '@/hooks'
import { BaseImage, BaseLoadingBox, BaseRouter } from '@/components/base'
import { getGameTagList } from '@/api/other'
//import { useElementSize } from '@vueuse/core'
import { useAppStore } from '@/store'
import { NGi, NGrid } from 'naive-ui'
import { useRequest } from '@/hooks'
import { isDesktop } from '@/hooks/useIsPC.ts'
const supplierel = ref(null)
const list: Ref<any[]> = ref([])
const { colsMedium } = useListCols(supplierel)
const appStore = useAppStore()

// const { width } = useElementSize(supplierel)

// const props = defineProps({
// 	defaultCols: {
// 		type: Number,
// 		default: 6
// 	}
// })

const currentCols = computed(() => {
	return colsMedium.value
})
// const itemWidth = computed(() => {
// 	if (width.value && currentCols.value) {
// 		return (width.value - (currentCols.value - 1) * 10) / currentCols.value
// 	}
// 	return 200
// })

const { run, data, error, loading, isEmpty } = useRequest<any>(getGameTagList, { pageSize: 40 })

const getList = async () => {
	await run({})
	list.value = data.value || []
	list.value.sort((a: any, b: any) => a.sort - b.sort)
}

watch(
	() => appStore.lang,
	() => {
		getList()
	}
)

onMounted(() => {
	getList()
})
</script>
